<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/commom.css">
    <link rel="stylesheet" href="./css/index.css">
    
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .ul1{
            list-style: none;
        }
        
        #container{
            margin: 0 auto;
            position: relative;
            width: 740px;
            overflow: hidden;
            height: 300px;
        }
        #content{
            width: 7750px;
            
            position: absolute;
            top:0;
            left:0;
            transition: left 1s linear;
        }
        #content div{
            float: left;
        }
        #btns{
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 1;
        }
        #btns li,#arrow-box li{

            width: 20px;
            height: 20px;
            background:#22141480;
            color: #fff;
            margin-right: 5px;
            border-radius: 25%;
            line-height: 20px;
            text-align: center;
            float: left;
            cursor: pointer;
        }
        #btns .active{
            background: #ff0036;
        }

        #arrow-box{
            position: absolute;
            left:10px;
            bottom:10px;
            z-index: 1;
        }
        .img1{
            width:770px ;
        }
        /* 
        
        
        
        
        
        
        */
        #container1{
            margin: 0 auto;
            position: relative;
            width: 340px;
            overflow: hidden;
            height: 250px;
        }
        #content1{
            width: 7750px;
            position: absolute;
            top:0;
            left:0;
            transition: left 1s linear;
        }
        #content1 div{
            float: left;
        }
        #btns1{
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 1;
        }
        #btns1 li,#arrow-box1 li{
            width: 20px;
            height: 20px;
            background:#22141480;
            color: #fff;
            margin-right:10px;
            border-radius: 25%;
            line-height: 20px;
            text-align: center;
            float: left;
            cursor: pointer;
        }
        #btns1 .active1{
            background: #ff0036;
        }

        #arrow-box1{
            position: absolute;
            left:10px;
            bottom:10px;
            z-index: 1;
        }
        .img2{
            width:340px ;
            height:250px
        }
        /* 
        
        
        
        
        */
        #container2{
            margin: 0 auto;
            position: relative;
            width: 300px;
            overflow: hidden;
            height: 250px;
        }
        #content2{
            width: 7750px;
            position: absolute;
            top:0;
            left:0;
            transition: left 1s linear;
        }
        #content2 div{
            float: left;
        }
        #btns2{
            position: absolute;
            bottom: 50px;
            right: 100px;
            z-index: 1;
        }
        #btns2 li,#arrow-box2 li{
            width: 20px;
            height: 20px;
            background:#22141480;
            color: #fff;
            margin-right:20px;
            border-radius: 25%;
            line-height: 20px;
            text-align: center;
            float: left;
            cursor: pointer;
        }
        #btns2 .active2{
            background: #ff0036;
        }

        #arrow-box2{
            position: absolute;
            left:10px;
            bottom:10px;
            z-index: 1;
        }
        .img3{
            
            width:150px ;
            height:150px
        }
    </style>
    

</head>

<body>
    <header>
        <div class="logo">
            <img src="./img/logo.png" alt="">
        </div>
    </header>
    <nav class="nav">
        <ul>
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">中心简介</a>
                <ul class="subnav">
                    <li>宗旨</li>
                    <li>校训</li>
                    <li>校规</li>
                    <li>教学形式</li>
                    <li>交通路线</li>
                    <li>联系我们</li>
                </ul>
            </li>
            <li><a href="#">影音艺苑</a>
                <ul class="subnav">
                    <li>德音雅乐</li>
                    <li>影音课堂</li>
                    <li>活动记录</li>
                </ul>
            </li>
            <li><a href="#">教学为先</a>
                <ul class="subnav">
                    <li>幸福人生讲座</li>
                    <li>王凤仪性命学思想</li>
                    <li>原始点</li>
                    <li>研习班</li>
                    <li>义工班</li>
                    <li>原始点</li>
                    <li>专题讲座</li>
                    <li>周末班</li>
                </ul>
            </li>
            <li><a href="#">素食养生</a>
                <ul class="subnav">
                </ul>
            </li>
            <li><a href="#">义卖展示</a>
                <ul class="subnav">
                </ul>
            </li>
            <li><a href="#">爱心传递</a>
                <ul class="subnav">
                    <li>义工风采</li>
                    <li>义工活动</li>
                </ul>
            </li>
            <li><a href="#">网上报名</a>
                <ul class="subnav">
                    <li>长期义工报名</li>
                    <li>短期义工报名</li>
                    <li>网上义工报名</li>
                </ul>
            </li>
        </ul>
    </nav>
    <div class="content">
        <div class="inner_content">
            <div class="row_one row">
                <div class="row_left">
                    <img src="./img/announcement_hd.jpg" width="40" height="164" alt="">
                    <ul>
                        <li><a href="#">成长日记意见反馈征集活动</a></li>
                        <li><a href="#">结明城国学赠公告</a></li>
                        <li><a href="#">公司诚征长期供货商</a></li>
                        <li><a href="#">明城国学招长期义工</a></li>
                        <li><a href="#">明城国学招长期义工</a></li>
                        <li><a href="#">明城国学招长期义工</a></li>
                        <li><a href="#">明城国学招长期义工</a></li>
                        <li><a href="#">结明城国学赠公告</a></li>
                    </ul>
                </div>
                <div class="row_right" id="container">
                    
                        <ul id="btns" class="ul1">
                            <Li class="active">1</Li>
                            <Li>2</Li>
                            <Li>3</Li>
                            
                        </ul>
                        <ul id="arrow-box" class="ul1">
                            <Li id="prev">&lt;</Li>
                            <Li id="next">&gt;</Li>
                        </ul>
                        <div id="content">
                            <div class="active"><img src="./img/upload/banner_01.jpg" class="img1"></div>
                            <div><img src="./img/upload/banner_02.jpg"  class="img1"></div>
                            <div><img src="./img/upload/banner_03.jpg" class="img1"></div>
                            
                        </div>
                   
                
                </div>
            </div>
            <div class="row_two row">
                <div class="row_item">
                    <div class="row_top">
                        <a href="">更多</a>
                    </div>
                    <div class="item_bottom">
                        <img src="./img/upload/video_img_307.jpg" alt="" width="100%">

                    </div>
                </div>
                <div class="row_item">
                    <div class="row_top"><a href="detail.html">更多</a></div>
                    <div class="item_bottom">
                        <ul>
                            <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                            <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                            <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                            <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                            <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                            <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                        </ul>
                    </div>
                </div>
                <div class="row_item">
                    <div class="row_top"><a href="">更多</a></div>
                    <div class="item_bottom">
                        <ul>
                            <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                            <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                            <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                            <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                            <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                            <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row_three">
                <div class="row_head">
                    <img src="./img/edu_tit.png" alt="">
                    <p>
                        <a href="#">幸福人生讲座</a> &ensp; <a href="#">王凤仪性命学思想</a> &ensp; <a href="#">原始点</a>&ensp; 
                        <a href="#">研习班</a> &ensp; <a href="#">义工班</a> &ensp; <a href="#">专题讲座</a> &ensp; <a href="#">周末班级</a>
                    </p>
                </div>
                <div class="row_bottom">
                    <div class="row_item">
                        <div class="item_bottom" id="container1">
                            <ul id="btns1" class="ul1">
                                <Li class="active1" >1</Li>
                                <Li >2</Li>
                                
                                
                            </ul>
                            <ul id="arrow-box1" class="ul1">
                                <Li id="prev1">&lt;</Li>
                                <Li id="next1">&gt;</Li>
                            </ul>
                            <div id="content1">
                                <div class="active"><img src="./img/upload/news_img_307x209.jpg" class="img2"></div>
                                <div ><img src="./img/upload/news_img_307x209.jpg"  class="img2"></div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="row_item">
                        <div class="head">
                            <div class="left_box">
                                <img src="./img/mc-icon.png" alt="">
                                <span>幸福人生讲座</span>
                            </div>
                            <div class="right_box">
                                <a class="a1" href="">[更多]</a>
                            </div>
                        </div>
                        <div class="item_bottom">
                            <ul>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                                <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                                <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                                <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                                <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row_item">
                        <div class="head">
                            <div class="left_box">
                                <img src="./img/mc-icon.png" alt="">
                                <span>王凤仪性命学思想</span>
                            </div>
                            <div class="right_box">
                                <a class="a1" href="">[更多]</a>
                            </div>
                        </div>
                        <div class="item_bottom">
                            <ul>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                                <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                                <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                                <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                                <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row_three row_four">
                <div class="row_bottom">
                    <div class="row_item">
                        <div class="head">
                            <div class="left_box">
                                <img src="./img/mc-icon.png" alt="">
                                <span>原始点</span>
                            </div>
                            <div class="right_box">
                                <a class="a1" href="">[更多]</a>
                            </div>
                        </div>
                        <div class="item_bottom">
                            <ul>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                                <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                                <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                                <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                                <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row_item">
                        <div class="head">
                            <div class="left_box">
                                <img src="./img/mc-icon.png" alt="">
                                <span>研习班</span>
                            </div>
                            <div class="right_box">
                                <a class="a1" href="">[更多]</a>
                            </div>
                        </div>
                        <div class="item_bottom">
                            <ul>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                                <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                                <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                                <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                                <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row_item">
                        <div class="head">
                            <div class="left_box">
                                <img src="./img/mc-icon.png" alt="">
                                <span>专题讲座</span>
                            </div>
                            <div class="right_box">
                                <a class="a1" href="">[更多]</a>
                            </div>
                        </div>
                        <div class="item_bottom">
                            <ul>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                                <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                                <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                                <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                                <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                                <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row_three row_five">
                <div class="row_head">
                    <img src="./img/pro_tit.png" alt="">
                    <p>
                       <a src="#"> <img src="./img/products_pagination.png" alt=""></a>
                       <a src="#"> <img src="./img/more_img.png" alt=""></a>
                    </p>
                </div>
                <div class="row_bottom">
                    
                    <div class="img_box">
                        <img src="./img/upload/products_01_161x154.jpg" alt="">
                    </div>
                    <div class="img_box">
                        <img src="./img/upload/products_02_161x154.jpg" alt="">
                    </div>
                    <div class="img_box">
                        <img src="./img/upload/products_03_161x154.jpg" alt="">
                    </div>
                    <div class="img_box">
                        <img src="./img/upload/products_04_161x154.jpg" alt="">
                    </div>
                    <div class="img_box">
                        <img src="./img/upload/products_05_161x154.jpg" alt="">
                    </div>
                </div>
                <div class="last">
                    <p class="pt">弟子规拼图</p>
                    <p class="pt">弟子规拼图</p>
                    <p class="pt">弟子规拼图</p>
                    <p class="pt">弟子规拼图</p>
                    <p class="pt">弟子规拼图</p>
                </div>
            </div>
            <div class="row_three row_six">
                <div class="row_bottom">
                    <div class="row_item">
                        <div class="head">
                            <div class="left_box">
                                <img src="./img/mc-icon.png" alt="">
                                <span>义工风采</span>
                            </div>
                            <div class="right_box">
                                <a class="a1" href="">[更多]</a>
                            </div>
                        </div>
                        <div class="item_bottom" id="container2">
                            <div style="display:flex;text-align:center;">
                                <ul id="btns2" class="ul1">
                                    <Li class="active2">1</Li>
                                    <Li>2</Li>
                                   
                                    
                                </ul>
                                
                                <div id="content2">
                                    <div>
                                        <div style="flex:1">
                                        <img src="./img/upload/fencai_01_146x126.jpg" alt="" width="100%">
                                        <p style="line-height:30px;">义工风采1</p>
                                        </div>
                                        <div style="margin-left:10px;flex:1">
                                        <img src="./img/upload/fencai_02_146x126.jpg" alt="" width="100%">
                                        <p style="line-height:30px;"">义工风采2</p>
                                        </div>
                                    </div>
                                    <div>
                                        <div style="flex:1">
                                            <img src="./img/upload/fencai_01_146x126.jpg" alt="" width="100%">
                                            <p style="line-height:30px;">义工风采3</p>
                                            </div>
                                            <div style="margin-left:10px;flex:1">
                                            <img src="./img/upload/fencai_02_146x126.jpg" alt="" width="100%">
                                            <p style="line-height:30px;"">义工风采4</p>
                                            </div>
                                    </div>
                                    
                                </div>
                                
                            </div>
                            <img src=" ./img/products_pagination.png" alt="" style="    margin: 8px auto;
                            display: block;">
                                </div>
                            </div>
                            <div class="row_item">
                                <div class="head">
                                    <div class="left_box">
                                        <img src="./img/mc-icon.png" alt="">
                                        <span>义工活动</span>
                                    </div>
                                    <div class="right_box">
                                        <a class="a1" href="">[更多]</a>
                                    </div>
                                </div>
                                <div class="item_bottom">
                                    <ul>
                                        <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                        <li><a href="#">中华传统文化师资培训基地招募启示</a></li>
                                        <li><a href="#">《厚德少年夏令营》招生简章</a></li>
                                        <li><a href="#">重庆三百多学生集体给长辈洗脚 家长热泪盈眶</a></li>
                                        <li><a href="#">第45期深圳蛇口《幸福人生讲座》剪影</a></li>
                                        <li><a href="#">复旦校长批教育功利：无德学生越有知识越有害</a></li>
                                        <li><a href="#">为国教子 以德育人一一幼儿师资培训班</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row_item last_item">
                                <ul>
                                    <li><a href="#">【长期义工报名】</a></li>
                                    <li><a href="#">【短期义工报名】</a></li>
                                    <li><a href="#">【网上义工报名】</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer>
                <div class="footer_inner">
                    <div class="footer_one">
                        <div class="f_left">
                            <img src="./img/module-help-contact-bg.png" alt="">
                        </div>
                        <div class="f_center">
                            <h3>客服电话</h3>
                            <span>便捷的电话咨询</span>
                            <h1>400-123-4567</h1>
                        </div>
                        <div class="f_right">
                            <img src="./img/fri_tit.png" alt="">
                            <p style="line-height:20px;margin-top: 10px;">大方广文化公益网 马来西亚中华文化教育中心 净空 方市化人的 马来西亚中华文化教育中心
                            </p>
                            <p style="line-height:20px;"">争空老教授专集网站 争空老教授专集网站 争空老教授专集网站</p>
                </div>
            </div>
            <div class=" footer_two">
                                首页 &nbsp;&nbsp;&nbsp;&nbsp; 中心简介 &nbsp;&nbsp;&nbsp;&nbsp; 影音艺苑 &nbsp;&nbsp;&nbsp;&nbsp;
                                教学为先&nbsp;&nbsp;&nbsp;&nbsp; 素食养生 &nbsp;&nbsp;&nbsp;&nbsp; 义卖展示&nbsp;&nbsp;&nbsp;&nbsp;
                                爱心传递 &nbsp;&nbsp;&nbsp;&nbsp; 联系我们 &nbsp;&nbsp;&nbsp;&nbsp; 网上报名
                        </div>
                        <div class="footer_three">
                            地址:深圳市福田区福强路福民新村福昌大厦一楼 电话:020-123456邮箱:mingchengsz@163.com
                        </div>
                        <div class="footer_three">
                            板权所有:明诚国学教育中心 粤ICP备0903729号
                        </div>
                        <div class="footer_three">
                            <span><img src="./img/icon/ico_qq.gif" />客服1</span>
                            <span><img src="./img/icon/ico_qq.gif" />客服2</span>
                            <span><img src="./img/icon/ico_qq.gif" />客服31</span>
                        </div>
                    </div>
            </footer>
            
            <script>
                 var oContainer = document.getElementById("container");
                var oUl = document.getElementById("btns");
                var aLi = oUl.getElementsByTagName("li");
                var oContent = document.getElementById("content");
                var aDiv = oContent.getElementsByTagName("div"); 
                var oPrev = document.getElementById("prev");
                var oNext = document.getElementById("next");
                var iNow = 0;
                for(var i =0;i<aLi.length;i++){
                    aLi[i].index = i;
                    aLi[i].onclick = function(){
                        change(this.index);
                        iNow = this.index;
        
                    }
                }
                function change(idx){
                    for(var j =0;j<aLi.length;j++){
                            aLi[j].className = "";
                        }
                        aLi[idx].className = "active";
                        oContent.style.left = -idx*770 + "px";
                }
                
                oNext.onclick = function(){
                    iNow++;
                    if(iNow ==aLi.length){
                        iNow =0;
                    }
                    change(iNow);
                }
                oPrev.onclick = function(){
                    iNow--;
                    if(iNow==-1){
                        iNow = aLi.length - 1;
                    }
                    change(iNow);
                }
               
                var oContainer1 = document.getElementById("container1");
                var oUl1 = document.getElementById("btns1");
                var aLi1 = oUl1.getElementsByTagName("li");
                var oContent1 = document.getElementById("content1");
                var aDiv1 = oContent1.getElementsByTagName("div"); 
                var oPrev1 = document.getElementById("prev1");
                var oNext1 = document.getElementById("next1");
                var iNow1 = 0;
                for(var i =0;i<aLi1.length;i++){
                    aLi1[i].index = i;
                    aLi1[i].onclick = function(){
                        change1(this.index);
                        iNow1 = this.index;
        
                    }
                }
                function change1(idx1){
                    for(var j =0;j<aLi1.length;j++){
                            aLi1[j].className = "";
                        }
                        aLi1[idx1].className = "active1";
                        oContent1.style.left = -idx1*340 + "px";
                }
                oNext1.onclick = function(){
                    iNow1++;
                    if(iNow1 ==aLi1.length){
                        iNow1 =0;
                    }
                    change1(iNow1);
                }
                oPrev1.onclick = function(){
                    iNow1--;
                    if(iNow1==-1){
                        iNow1 = aLi1.length - 1;
                    }
                    change1(iNow1);
                }
                var oContainer2 = document.getElementById("container2");
                var oUl2 = document.getElementById("btns2");
                var aLi2 = oUl2.getElementsByTagName("li");
                var oContent2 = document.getElementById("content2");
                var aDiv2 = oContent2.getElementsByTagName("div"); 
                var oPrev2 = document.getElementById("prev2");
                var oNext2 = document.getElementById("next2");
                var iNow2 = 0;
                for(var i =0;i<aLi2.length;i++){
                    aLi2[i].index = i;
                    aLi2[i].onclick = function(){
                        change2(this.index);
                        iNow2 = this.index;
        
                    }
                }
                function change2(idx2){
                    for(var j =0;j<aLi2.length;j++){
                            aLi2[j].className = "";
                        }
                        aLi2[idx2].className = "active2";
                        oContent2.style.left = -idx2*310 + "px";
                }
                oNext2.onclick = function(){
                    iNow2++;
                    if(iNow2 ==aLi2.length){
                        iNow2 =0;
                    }
                    change2(iNow2);
                }
                oPrev2.onclick = function(){
                    iNow2--;
                    if(iNow1==-2){
                        iNow2 = aLi2.length - 1;
                    }
                    change2(iNow2);
                }
                
               
           
            </script>   
        
</body>

</html>